/*-----------------------------------------------------------------------------------------
	Home
-----------------------------------------------------------------------------------------*/
.page-home {
	body {
		background: none;
	}
	.container {
		padding: 0 0 4em;
	}
	.feature {
		position: relative;

		.quotes {
			bottom: 0;
			color: #2D2928;
			font-size: 1.2em;
			font-style: italic;
			overflow: hidden;
			line-height: 1.2;
			position: absolute;
			text-align: center;
			width: 100%;
			z-index: 6;

			p {
				margin: 0;
			}
		}
		.hero {
			display: block;
			width: 100%;
			max-width: none;
			text-align: center;
		}
		.quote {
			text-align: center;
			width: 100%;

			img {
				display: block;
				margin: .8em auto 0;
				max-height: 2em;
				max-width: 14em;
			}
		}
		.quotation-img {
		    border-top: 1px solid #E5E5E5;
		    margin: 1em auto 0.5em;
		    max-width: 20em;
		}
		.quote a {
			color: @body-copy;
			background:  #FFFFFF;
			display: inline-block;
			padding: 1.5em 2em;
			line-height: 1.4;
			max-width: 40em;
			vertical-align: bottom;
		}
	}
	.section-home {
		padding: 0;
		width: 100%;
		max-width: none;
	}
	section {
		padding-bottom: 10em;
		/*width: 90%;*/
	}
	section:after {
		content: "";
		display: block;
		border-bottom: 3px solid rgba(255, 255, 255, 0.15);
		/*max-width: 1400px;*/


		left: 50%;
		margin: 0 auto 0 -35%;
		padding: 10em 0 0;
		position: absolute;
		width: 70%;
	}
	.section-wine:after,
	.section-home:after {
		display: none;
	}
	.blocks {
	    position: relative;
	    z-index: 5;
	    padding-bottom: 0;
	}
	.section-news {
		/*padding-bottom: 0;*/
	}

}







/*-----------------------------------------------------------------------------------------
	Section - News
-----------------------------------------------------------------------------------------*/
.section-news {
	.news-list {
		font-size: .95em;

		li {
			width: 28%;
			.inline-block;
			margin: 0 6% 0 0;
		}
		li:last-child {
			margin: 0;
		}
		.date {
			color: @yellow;
		}
		.title a {
			font-style: italic;
			font-weight: 400;
			margin: 0 0 1.5em;
			font-size: 1.1em;
			display: block;
		}

	}
	.headings {
		overflow: hidden;

		h1 {
			float: left;
		}
		.view-all {
			font-style: italic;
			font-size: 1.3em;
			margin: 1.4em 0 0;
			float: right;
		}
	}
}




/*-----------------------------------------------------------------------------------------
	Page - Article w/ subnav
-----------------------------------------------------------------------------------------*/
.article-with-subnav {
	.content {
		float: left;
		width: 70%;
		max-width: 55em;
		background: white;
	}
	.content-block {
		position: relative;
		.panel-style;
		margin: 0 0 3px;
		background: none;

		.title {
			border-bottom: 1px dashed #ccc;
			padding: .5em 0;
			color: @body-copy;
			margin: 0 0 1em;
			font-style: normal;
		}
		.date {
			background: @yellow;
			display: inline-block;
			font-size: 0.9em;
			margin: 0 0 2em;
			padding: 1em 2em;
			position: absolute;
			text-transform: uppercase;
			top: 0;
			vertical-align: top;
		}
	}
	iframe {
		width: 100%;
		margin: 0 0 2em;
	}
	.subnav {
		float: left;
		font-size: .9em;
		width: 25%;
		margin: 0 5% 0 0;
		max-height: 40em;
		overflow: auto;

		li {
			border-bottom: 1px solid #fff;
			border-bottom: 1px solid rgba(255, 255, 255, .3);
			position: relative;

			a {
				display: block;
				padding: 1em 2em;
				border-left: 4px solid rgba(255, 255, 255, .05);
				transition: all .3s ease-in-out;
			}
			a:hover {
				border-color: @yellow;
				background: #4C4847;
				background: rgba(255, 255, 255, .05);
			}
		}
		li.active {
			a {
				border-color: @yellow;
				background: #4C4847;
				background: rgba(255, 255, 255, .05);
			}

		}
		li:last-child {
			border: none;
		}
		.has-video a {
			padding-left: 4.8em;
		}
		.has-video .video {
			.glyph;
			height: 1em;
			width: 1em;
			background-position: 0 -450px;
			width: 33px;
			height: 23px;
			position: absolute;
			top: 1.2em;
			left: 1.5em;
		}
	}

}





/*-----------------------------------------------------------------------------------------
	Section - People
-----------------------------------------------------------------------------------------*/
.section-people {
	padding-left: 0;
	padding-right: 0;

	.inner {
		padding: 0 6em;
	}
	.headings,
	.copy {
		padding: 0 0 4em;
	}
	.headings {
		width: 33%;
		float: left;
	}
	.copy {
		float: right;
		width: 60%;
	}
	.copy:before {
		.content-border;
	}
	.people-nav {
		width: 100%;
		clear: both;
		text-align: center;
		/*padding-bottom: 10em;*/

		li {
			/*width: 20em;*/
			width: 16%;
			.inline-block;
			background: @yellow;



			img {
				border: 0 solid @yellow;
				width: 100%;
				display: block;
				transition: all .3s ease-in-out;
				position: relative;
			}
			a {
				display: block;
				position: relative;
			}
			.active img,
			img:hover {
				border: 10px solid @yellow;
				opacity: .7;
			}
			.active:after {
				bottom: 0em;
				content: "";
				display: block;
				left: 50%;
				margin: 0 0 0 -2em;
				position: absolute;
				z-index: 5;
				width: 0px;
				height: 0px;
				border-left: 2em solid transparent;
				border-right: 2em solid transparent;
				border-bottom: 2em solid @yellow;
			}
		}
	}
	.info {
		display: none;
		position: absolute;
		background: @yellow;
		background: rgba(255, 186, 0, .95);
		padding: 3em;
		left: 0;
		width: 100%;
		z-index: 2;
		box-shadow: 0px 3px 5px rgba(0,0,0,.2);

		.title, .name {
			color: #fff;
			font-size: 1.8em;
			margin: 0;
		}
		.title {
			font-style: italic;
			font-size: 1.4em;
			margin: 0 0 1em;
		}
		/*.content {
			margin: 0 auto;
			max-height: 18em;
			max-width: 50em;
			overflow: auto;
			text-align: left;
			position: relative;
		}
		*/
		.content {
		        -ms-column-gap: 2em;
		       -moz-column-gap: 2em;
		    -webkit-column-gap: 2em;
		            column-gap: 2em;
		        -ms-columns: 3;
		       -moz-columns: 3;
		    -webkit-columns: 3;
		            columns: 3;
		    margin: 0 auto;
		    max-width: 73em;
		    overflow: auto;
		    position: relative;
		    text-align: left;
		}
		.close {
			cursor: pointer;
			background: url('/images/modal-close.png');
			width: 30px;
			height: 30px;
			position: absolute;
			right: 2em;
			top: 2em;
			text-indent: -5000px;
			overflow: hidden;
			opacity: .3;
			transition: opacity .2s ease;
		}
		.close:hover {
			opacity: 1;
		}
	}
}






/*-----------------------------------------------------------------------------------------
	Section - Story
-----------------------------------------------------------------------------------------*/
.section-story {
	.inner {
		padding-left: 0;
		padding-top: 0;
		position: relative;
	}
	.headings {
		width: 40%;
		float: left;

		h2 {
			font-size: 1.3em;
		}
		small {
			text-align: right;
		}
	}
	.type {
		padding: 2em 0 0 6em;
	}
	.content {
	    position: absolute;
	    right: 4em;
	    top: 4em;
	    height: 85%;
	    width: 50%;
	}
	.copy {
	    position: absolute;
		overflow: auto;
		height: 100%;
		padding: 2em  0 0;
	}
	.content:before {
		.content-border;
		background: @body-copy;
		margin-bottom: 0;
	}
	.hero {
	    display: block;

	}
	.timeline {
		display: block;
		border-left: 3px solid #e5e5e5;
		padding: 0 0 0 3em;
		margin: 0 0 3em 2em;

		h2:before {
			background: #FFFFFF;
			border: 4px solid #E5E5E5;
			border-radius: 20em;
			content: "";
			display: block;
			height: 0.8em;
			left: 0.85em;
			margin: 0.3em 0 0;
			position: absolute;
			width: 0.8em;
		}
	}
}






/*-----------------------------------------------------------------------------------------
	Section - Vineyard
-----------------------------------------------------------------------------------------*/
.section-vineyard {
	.hero,
	.map,
	.content {
		float: left;
	}
	.hero {
		/*height: 45em;*/
		max-width: 40em;
		width: 50%;
	}
	.map {
		width: 35%;
		height: 45em;
		border: 5px solid #fff;
	}
	.content {
		width: 50%;
		/*height: 45em;*/
		padding: 0 0 0 4em;
	}
	.copy {
		/*height: 30em;*/
		/*overflow: auto;*/
		border-top: 3px solid #fff;
		padding: 2em 0 0;
		margin: 2em 0 0;
	}
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
		background: white;
	}
	.mCSB_scrollTools .mCSB_draggerRail {
		background: rgba(255, 255, 255, .2);
	}
}



.subnav {
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
		background: white;
	}
	.mCSB_scrollTools .mCSB_draggerRail {
		background: rgba(255, 255, 255, .2);
	}
}


/*-----------------------------------------------------------------------------------------
	Section - Wine
-----------------------------------------------------------------------------------------*/
.section-wine {
	width: 90%;
	margin: 0 auto;
	padding-right: 0;
	padding-left: 0;

	.headings {
		position: relative;
	}
	.inner {
		padding: 0 6em;

		h1 {
			/*float: left;*/
			margin: 0 0 .4em;
		}
	}
	.wine-place-holder-container,
	.wine-placeholder {
		display: none;
	}
	#wineForm {
		background-color: white;
	}
	.wine-panel {
		background: white;

		li {
			float: left;
			position: relative;
			width: 11em;
			display: block;
			height: 32em;
			padding: 3em 2em;
			text-align: center;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: grab;
			text-transform: uppercase;
			margin: 0;
			border-bottom: 0px solid @yellow;
			transition: opacity .4s ease, border .2s ease-in-out;
			opacity: .9;
		}
		li:after {
			left: 0;
			content: "";
			width: 1px;
			position: absolute;
			height: 100%;
			background: #e5e5e5;
			display: block;
			top: 0;
		}
		li:hover {
			border-bottom: 10px solid @yellow;
			opacity: 1;
		}
		img {
			display: block;
		    margin: 0 auto 1em;
		    width: 64%;
		}
		.name-vintage {
		    height: 4.5em;
		    overflow: hidden;
		}
		.wine-img {
		    height: 27.2em;
		    overflow: hidden;
		}
		.price {
			border-top: 2px solid #E5E5E5;
			color: #2D2928;
			font-style: italic;
			margin: 0.5em 0 0;
			padding: 0.5em;
		}
	}
	.view-detail, .add-to-cart {
		.glyph;
		background-position: 18px -35px;
		position: absolute;
		background-color: @yellow;
		border: .2em solid white;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
		width: 4em;
		height: 4em;
		border-radius: 20em;
		top: 42%;
		padding: 0;
		left: 15%;
		transition: all .3s ease-in-out;
		overflow: hidden;
		opacity: 0;
		/*transform: scale(0);*/
	}
	 .add-to-cart {
	 	right: 15%;
	 	left: auto;
	 	background-position: 14px -142px;
	 }
	.view-detail:hover,
	.add-to-cart:hover {
		background-color: #3C3A3D;
	}
	li:hover {
		.view-detail,
		.add-to-cart {
			/*transform: scale(1);*/
			opacity: 1;
		}
	}
	.wine-name,
	.vintage {
		font-size: 1em;
		margin: 0;
	}
	.wine-name {
		color: @body-copy;
	}
	.pagination {
	    float: right;
	    margin: 2em 0 0;
	}
	.swiper-pagination-switch {
	    background: #FFFFFF;
	    border-radius: 20em;
	    cursor: pointer;
	    display: inline-block;
	    height: 1em;
	    margin: 0 1em 0 0;
	    transition: background .2s ease;
	    width: 1em;
	}
	.swiper-visible-switch {
	    background: @yellow;
	}

}
.arrow {
    .glyph;
    background-position: 0 -300px;
	display: block;
	height: 3em;
	left: 1%;
	margin-top: 16.5em;
	cursor: pointer;
	position: absolute;
	width: 2em;
	opacity: .4;
	transition: opacity .2s ease;
}
.arrow-right {
	left: auto;
	right: 1%;
	background-position: -100px -300px;
}
.arrow:hover {
	opacity: 1;
}
.winetype-toggle {
	.inline-block;
	right: -6em;
	bottom: 0;
	margin-bottom: .9em;
	background: white;
	position: absolute;
	overflow: hidden;

	li {
		float: left;
		border-right: 1px solid #e5e5e5;
	}
	li:last-child {
		border-right: none;
	}
	li a {
		cursor: pointer;
		padding: .7em 1.5em;
		display: block;
		background: white;
		color: @body-copy;
		transition: all .2s ease;
		font-style: italic;
	}
	a:hover {
		background: #e9e9e9;
	}
	.active a {
		background: @yellow;
	}
}


/*-----------------------------------------------------------------------------------------
	Page - Wine
-----------------------------------------------------------------------------------------*/
.page-wine {
	.section-wine {
		/*padding-bottom: 0;*/

		.inner {
			border-top: 1px solid rgba(255,255,255,.2);
			padding-top: 2em;
		}
	}
	.wine-nav {
		a {
			position: absolute;
			left: 2em;
			font-size: .9em;
			top: 1.5em;
		}
		.next {
			left: auto;
			right: 2em;
		}
	}
	.wine-detail {
		.panel-style;
		margin: 0 auto 4em;
		max-width: 70em;
		position: relative;

		hr {
			margin: 0;
			border: none;
			display: none;
		}
		.name {
			color: @body-copy;
			text-align: center;
			border-bottom: 1px dashed #ccc;
			margin: 0 0 1em;
			padding: 0 0 1em;
			font-size: 2.5em;
		}
		.wine-hero {
			.inline-block;
			max-width: 10em;
			width: 15%;
			margin: 0 5% 0 0;
		}
		.details {
			.inline-block;
			font-size: .95em;
			width: 80%;
		}
		.meta,
		.history {
			.inline-block;
			width: 55%;
		}
		.history {
			border-left: 5px solid #f5f5f5;
			padding: 0 0 0 2.5em;
		}
		.meta {
			margin: 0 5% 0 0;
			width: 40%;
		}
		.block {
			margin: 0 0 1em;
			border-bottom: 1px dashed #ccc;
			padding: 0 0 1em;
		}
		.block:last-child {
			border: none;
		}
		.footnote {
			margin: 2em 0 1em;
			font-style: italic;
			color: #666;
			font-size: .9em;
			/*text-align: center;*/
			width: 100%;

		}
		.figure {
			font-size: 2em;
			margin: 0 0 .2em;
		}
		.buy-form {
			li {
				.inline-block;
				margin: 0 .5em  0 0;
				min-width: 7em;
			}
		}
	}
}








/*-----------------------------------------------------------------------------------------
	Page - Contact
-----------------------------------------------------------------------------------------*/
.section-contact,
.page-contact {
	.container {
		color: #fff;
		padding-bottom: 3.6em;
	}

	.hero {
		float: left;
		width: 30%;
	}
	.content-block {
		float: left;
		width: 30%;
	}
	.contact-form {
		margin: 0 5%;
		float: left;
		width: 30%;
		
		textarea {
			height: 10em;
		}
	}
}
#map_canvas {
	width: 100%;
	height: 35em;
	border: 5px solid #fff;
}




/*-----------------------------------------------------------------------------------------
	Page - Cart
-----------------------------------------------------------------------------------------*/
.orderDisplay {
	section .inner {
		max-width: 70em;
		margin: 0 auto;
	}
	th {
		white-space: nowrap;
	}
	.cart-contents {
		.panel-style;
		padding: 4%;

		.col1 { width: 55%; }
		.col2 { width: 15%; text-align: right;	}
		.col3 { width: 15%; }
		.col4 { width: 15%; text-align: right; }
		.col5 { width: 10%; text-align: right; }

		.col3 select {
			width: 7em;
			text-align: left;
			padding: .5em 1em;
		}
		.cartImg-wrapper {
		    display: inline-block;
		    height: 5em;
		    margin: -0.5em 1em -0.5em 0;
		    overflow: hidden;
		    position: relative;
		    vertical-align: middle;
		    width: 10.6em;
		}

		.cartImg {
			.inline-block;
			bottom: -6em;
			margin: 0 1em 0 0;
			position: absolute;
			vertical-align: middle;
			width: 100%;
		}
		.shipping-options {
			max-width: 20em;
		}
		.productDes {
			.inline-block;
			width: 40%;
			vertical-align: middle;
		}
		.cart-shipping-message, .cart-total {
			.inline-block;
			width: 60%;
		}
		.cart-foot {
			padding: 2em 0;
		}
		.cart-shipping-message {
			font-style: italic;
			font-size: .9em;
			color: #666;
			
			
			strong {
			    background: @yellow;
			    border-radius: 2px;
			    color: #2D2928;
			    background: #e9e9e9;
			    border: 1px solid #ddd;
			    padding: 0.2em 0.5em;
			}
		}
		.cart-total {
			text-transform: uppercase;
			font-size: 1.3em;
			width: 35%;
			text-align: right;
		}
		.item-remove {
			.glyph;
			opacity: .4;
			.inline-block;
			background-position: -50px -50px;
			background-color: #fff;
			padding: 0;
			width: 21px;
			height: 20px;
			border-radius: 0;
		}
		.item-remove:hover {
			opacity: 1;
		}
		.cart-shipping-region,
		.cart-shipping-cost,
		.international {
			.inline-block;
			height: 6em;
			margin: 0 3% 0 0;
			padding: 1em 2em 0 0;
			vertical-align: top;
			width: 30.5%;
			border-right: 2px solid #E5E5E5;
		}
		.international {
			border: none;
			margin: 0;
		}
		.control {
		    border-top: 2px solid #E5E5E5;
		    padding: 1em 0 0;
		    overflow: hidden;

		    .button {
		    	float: left;
		    	margin: 0 1em 0 0;
		    }
		    .button.checkout {
		    	float: right;
		    	margin: 0;
		    }
		}
	}
	.purchase-details {
		.inline-block;
		width: 45%;
		margin: 0 2%;
		text-align: left;

		input {
			margin: 0 0 2em;
		}
	}
	.purchase-wrapper {
		padding: 3em 0;
		max-width: 70em;
		text-align: center;
		margin: 0 auto;

		label {
			color: #fff;
		}
	}
	.cart-submit {
		text-align: center;

		label {
			color: white;
		}
	}
	.terms {
		margin: 0 0 1em;
		
		li {
			margin: 0;
		}
		label {
			.inline-block;
			cursor: pointer;
		}
		.orderValidationError {
			border-radius: 3px;
			margin: 0 0 1em;
		}
	}
	.orderValidationError {
		margin:  -2em 0 2em 5px;
		
	}

}
#confirmOrder {
	.purchase-wrapper {
		.list {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
	}
	/*.cart-contents {
		background: none;
		padding: 0;
	}
	td,th {
		color: #fff;
		border-color: rgba(255, 255, 255, .2);
	}*/
	.purchase-details {
		width: auto;
		margin: 0 4% 2em;
	}
	.cart-contents tr:last-child td {
		/*border: none;*/
	}
	.col3 {
		text-align: right;
	}	
	.cart-foot {
		padding: 1em  0 0;
	}
	.footnote {
		display: none;
	}
}
#finaliseSucceedOrder,
#finaliseFailOrder {
	max-width: 40em;
	
	.cart-contents {
		background: none;
		padding: 0;
	}
	.purchase-wrapper {
		padding: 0;
		text-align: left;
	}
	.orderSuccessMessage {
		margin: 0 0 2em;
	}
}


/*-----------------------------------------------------------------------------------------
	Page - Distributors
-----------------------------------------------------------------------------------------*/
.page-distributors {
	/*.content-block {
		max-height: 35em;
		overflow: auto;
	}*/
}





/*-----------------------------------------------------------------------------------------
	Page - Legal Drinking Age
-----------------------------------------------------------------------------------------*/
.page-lda {
	
	.formValidationError {
		border-radius: 3px;
		margin: 0 0 1em;
	}	
	.container .inner {
		max-width: 40em;
	}
	.dob, .country {
		
	}
	.dob select {
		.inline-block;
		width: 30%;
		margin: 0 .5em 0 0;
	}
	.content-block {
		border-left: 4px solid @yellow;
		padding: 0 0 0 2em;
		font-style: italic;
		margin: 2em 0 0;
	}
	.remember {
		label {
			cursor: pointer;
			.inline-block;
		}
	}
}





/*-----------------------------------------------------------------------------------------
	Page - 404
-----------------------------------------------------------------------------------------*/
.page-404 {
	.container {
		border-top: 4px solid #FFFFFF;
		  color: #FFFFFF;
		  margin: 13em auto 0;
		  max-width: 40em;
		  padding-top: 4em;
		  width: 90%;
	}
}
